<template>
  <div>
    <el-dialog
      v-model="props.isShow"
      :title="props.isAdd ? '添加' : '修改'"
      center
      :before-close="cancel"
    >
      <el-form :model="form" ref="userRef" :rules="rules">
        <el-form-item label="所属角色" prop="roleid" :label-width="formLabelWidth">
          <el-select v-model="form.roleid" placeholder="Please select a zone">
            <el-option
              v-for="item in store.getters['role/getRole']"
              :label="item.rolename"
              :value="item.id"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="2" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel(userRef)">取消</el-button>
          <el-button type="primary" @click="confirm(userRef)"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, defineProps, defineEmits } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { useradd, useredit, userinfo, usercount } from "../../request/api";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
let store = useStore();

const formLabelWidth = "140px";
let userRef = ref<FormInstance>();

// 父传子
let props = defineProps({
  isShow: Boolean,
  isAdd: Boolean,
});

// 子传父
let emit = defineEmits(["cancel"]);

// 取消
const cancel = (formEl?: FormInstance | undefined) => {
  emit("cancel");
  form.value = {
    roleid: "", //角色编号
    username: "", //管理员名称
    password: "", //密码
    status: 1, //状态  1正常2禁用
  };
  if (!formEl) return;
  userRef.value.resetFields();
};

const form = ref({
  roleid: "", //角色编号
  username: "", //管理员名称
  password: "", //密码
  status: 1, //状态  1正常2禁用
});

store.dispatch("role/getActionsRole");

// 规则验证
const rules = {
  username: [
    {
      required: true,
      message: "请输入管理员名称",
      trigger: "blur",
    },
    {
      min: 2,
      max: 8,
      message: "长度在 2 到 8 个字符",
      trigger: "blur",
    },
  ],
  roleid: [{ required: true, message: "请选择所属管理员", trigger: "change" }],
};

// 编辑的数据回显
const lookup = async (uid: number) => {
  let res = await userinfo({ uid });
  // console.log(res);
  form.value = res.list;
  form.value.uid = uid;
  // 密码为空则不修改
  form.value.password = "";
};
defineExpose({
  lookup,
});

// 确定
const confirm = async (formEl?: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((val) => {
    if (val) {
      //   console.log(form.value);
      if (props.isAdd) {
        useradd(form.value).then((res) => {
          if (res.code == 200) {
            // console.log(res);
            ElMessage.success(res.msg);
            // 成功-关闭弹窗
            cancel();
            store.dispatch("user/getUserActions");
            store.dispatch("user/getUserCount");
          }
        });
      } else {
        useredit(form.value).then((res) => {
          //   console.log(userForm.value);
          //   console.log(res);
          if (res.code == 200) {
            // 成功 提示
            ElMessage.success(res.msg);
            // 成功-关闭弹窗
            cancel();
            store.dispatch("user/getUserActions");
            store.dispatch("user/getUserCount");
          } else {
            ElMessage.error(res.msg);
          }
        });
      }
    }
  });
};
</script>

<style lang="less" scoped></style>
